<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			html,
			body {
				font: 13px/18px sans-serif;
			}
			
			select {
				min-width: 300px;
			}
		</style>
	</head>

	<body>
		<div id="el"></div>
		<!-- using string template here to work around HTML <option> placement restriction -->
		<script type="text/x-template" id="demo-template">
			<div>
				<p>Selected: {{ selected }}</p>
				<select2 :options="options" v-model="selected">
					<option disabled value="0">Select one</option>
				</select2>
			</div>
		</script>

		<script type="text/x-template" id="select2-template">
			<select>
				<slot></slot>
			</select>
		</script>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component('select2', {
				props: ['options', 'value'],
				template: '#select2-template',
				mounted: function() {
					var vm = this
					$(this.$el)
						.val(this.value)
						// init select2
						.select2({
							data: this.options
						})
						// emit event on change.
						.on('change', function() {
							vm.$emit('input', this.value)
						})
				},
				watch: {
					value: function(value) {
						// update value
						$(this.$el).val(value)
					},
					options: function(options) {
						// update options
						$(this.$el).select2({
							data: options
						})
					}
				},
				destroyed: function() {
					$(this.$el).off().select2('destroy')
				}
			})

			var vm = new Vue({
				el: '#el',
				template: '#demo-template',
				data: {
					selected: 0,
					options: [{
							id: 1,
							text: 'Hello'
						},
						{
							id: 2,
							text: 'World'
						}
					]
				}
			})
		</script>
	</body>

</html>